// pages/songDetail/songDetail.js
import PubSub from 'pubsub-js'
// 引入 日期 格式化
import moment from 'moment'
import request from '../../utils/request'
// 获取全局实例
const appInstance = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 音乐是否播放
    song: {}, // 歌曲详情对象
    musicId: '', // 音乐id
    musicLink: '', // 音乐的链接
    currentTime: '00:00', // 实时时间
    durationTime: '00:00', // 总时长
    currentWidth: 0, // 实时进度条的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let musicId = options.musicId;
    this.setData({
      musicId
    })
    this.getMusicInfo(musicId)

    // 判断当前页面音乐是否在播放
    if (appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId) {
      // 修改当前页面音乐播放状态为true
      this.setData({
        isPlay: true
      })
    }

    // 创建控制 音乐播放的 实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager()
    this.backgroundAudioManager.onPlay(() => {
      // 修改音乐是否播放的状态
      this.changePlayState(true)
      // 修改全局音乐播放的状态
      appInstance.globalData.musicId = musicId;
    })
    this.backgroundAudioManager.onPause(() => {
      console.log('点击了暂停');
      this.changePlayState(false)
    })
    this.backgroundAudioManager.onStop(() => {
      console.log('点击了暂停');
      this.changePlayState(false)
    })
    // 监听音乐播放自然结束
    this.backgroundAudioManager.onEnded(() => {
      // 自动切换至下一首音乐，并且自动播放
      PubSub.publish('switchType', 'next')
      // 将实时进度条的长度还原成 0；时间还原成 0；
      this.setData({
        currentWidth: 0,
        currentTime: '00:00'
      })
    });
    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // 这两个单位是 秒
      // console.log('总时长: ', this.backgroundAudioManager.duration);
      // console.log('实时的时长: ', this.backgroundAudioManager.currentTime);
      // 格式化实时的播放时间
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
      // let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 450;
      let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 100;
      this.setData({
        currentTime,
        currentWidth
      })

    })
  },
  // onLoad 结束

  // 修改播放状态的函数
  changePlayState(isPlay) {
    this.setData({
      isPlay
    })
    // 修改全局音乐播放的状态
    appInstance.globalData.isMusicPlay = isPlay;
  },

  // 获取音乐详情的功能函数
  async getMusicInfo(musicId) {
    let songData = await request('/song/detail', {
      ids: musicId
    })
    console.log(songData);
    // songData.songs[0].dt 就是音乐的总时间，单位是 毫秒
    let durationTime = moment(songData.songs[0].dt).format('mm:ss')
    console.log(durationTime);
    this.setData({
      song: songData.songs[0],
      durationTime
    })
    // 动态更新窗口标题
    wx.setNavigationBarTitle({
      title: this.data.song.name,
    })
  },

  // 点击播放/暂停的回调
  handleMusicPlay() {
    let isPlay = !this.data.isPlay;
    // 修改是否播放的状态
    // this.setData({
    //   isPlay
    // })
    this.musicControl(isPlay, this.data.musicId, this.data.musicLink)
  },

  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicId, musicLink) {

    if (isPlay) {
      if (!musicLink) {
        // 获取音乐播放连接
        let musicLinkData = await request('/song/url', {
          id: musicId
        })
        musicLink = musicLinkData.data[0].url
        this.setData({
          musicLink
        })
      }


      this.backgroundAudioManager.src = musicLink
      // 必须设置 title
      this.backgroundAudioManager.title = this.data.song.name
    } else {
      // 暂停
      this.backgroundAudioManager.pause()
    }
  },

  // 点击切歌的回调
  handleSwitch(event) {
    // 获取 切歌的类型
    let type = event.currentTarget.id
    // 关闭当前播放的音乐
    this.backgroundAudioManager.stop()

    // 订阅来自  recommendSong 页面发布的 musicId消息
    PubSub.subscribe('musicId', (msg, musicId) => {
      console.log(musicId);
      this.getMusicInfo(musicId)
      this.musicControl(true, musicId)
      // 如若不取消订阅，每次点击都会触发这个 事件，那么它的事件回调 会添加到一个数组中，每次点击都会把数组的 事件回调执行一遍
      // 取消订阅
      PubSub.unsubscribe('musicId')
    })

    // 发布消息数据给 recommendSong 页面
    PubSub.publish('switchType', type)
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})